<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/css.css">
    <title>苏宁不易购-穷鬼只看不买</title>
    <script src="./js/js.js"></script>
</head>
<body>
    <div class="box">

        <!-- 顶部搜索区域 -->
        <div class="searchDiv">
            <!-- 顶部分类一栏 -->
            <div class="searchTop">
                <!-- 分类图标 -->
                <div class="fl"></div>
                <!-- 横幅特价 -->
                <div class="tj">
                    <img src="./image/tj.gif" alt="">
                </div>
                <!-- 登陆 -->
                <div class="login"></div>
            </div>
            <!-- 顶部搜索一栏 -->
            <div class="searchInput">
                <div class="fl scroll_dis"></div>
                <a href="">年货礼盒299减210</a>
                <div class="login scroll_dis"></div>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="lbtDiv">
            <div class="lbtWindow">
                <ul>
                    <li class="lbt_0"><a href="#"></a></li>
                    <li class="lbt_1"><a href="#"></a></li>
                    <li class="lbt_2"><a href="#"></a></li>
                    <li class="lbt_3"><a href="#"></a></li>
                    <li class="lbt_4"><a href="#"></a></li>
                    <li class="lbt_5"><a href="#"></a></li>
                    <li class="lbt_1"><a href="#"></a></li>
                </ul>
            </div>
            <!-- 轮播图按钮 -->
            <ul class="lbtBtn cleerFloat">
                <li class="lbtBtnACtiv"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <!-- 腊八节 -->
        <div class="lbjDiv">
            <!-- 腊八到 抢年货 -->
            <a href="#" class="lbj">
                <img src="./image/lb.gif" alt="">
            </a>
            <div class="lbjTAB">
                <a href="#"><img src="./image/lbjTAB_1.png" alt=""></a>
                <a href="#"><img src="./image/lbjTAB_2.png" alt=""></a>
                <a href="#"><img src="./image/lbjTAB_3.png" alt=""></a>
            </div>
        </div>

        <!-- 功能列表 -->
        <div class="funList">
            <ul class="cleerFloat">
                <li><img src="./image/snms.png" alt=""><span>XX秒杀</span></li>
                <li><img src="./image/sncs.png" alt=""><span>苏宁超市</span></li>
                <li><img src="./image/snpg.png" alt=""><span>苏宁拼购</span></li>
                <li><img src="./image/sjsm.png" alt=""><span>手机数码</span></li>
                <li><img src="./image/snjd.png" alt=""><span>苏宁家电</span></li>
                <li><img src="./image/mfsg.png" alt=""><span>免费水果</span></li>
                <li><img src="./image/superhy.gif" alt=""><span>super会员</span></li>
                <li><img src="./image/qdyl.png" alt=""><span>签到有礼</span></li>
                <li><img src="./image/lqzx.png" alt=""><span>领券中心</span></li>
                <li><img src="./image/gdpd.png" alt=""><span>更多频道</span></li>
            </ul>
        </div>

        <!-- 新人红包一栏 -->
        <div class="NewRedEnvelope">
            <a href=""><img src="./image/NewRedEnvelope_1.png" alt=""></a>
            <a href=""><img src="./image/NewRedEnvelope_2.gif" alt=""></a>
            <a href=""><img src="./image/NewRedEnvelope_3.gif" alt=""></a>
        </div>

        <!-- 天天低价和苏宁秒杀 -->
        <div class="lowAndSeckill">
            <div class="everyDayLow">
                <div class="title">
                    <h5>天天低价</h5><p class="time"><span>00</span>:<span>00</span>:<span>99</span></p>
                    <p class="describe">人气好货限时抢</p>
                </div>
                <ul>
                    <li>
                        <img src="./image/ms_1.jpg" alt="">
                        <span>￥8.8</span>
                    </li>
                    <li>
                        <img src="./image/ms_2.jpg" alt="">
                        <span>￥9.8</span>
                    </li>
                </ul>
            </div>
            <!-- 苏宁秒杀 -->
            <div class="seckill">
                <div class="title">
                    <h5>苏宁秒杀</h5><p class="time">
                    <p class="describe">品质好货天天秒</p>
                </div>
                <ul>
                    <li>
                        <img src="./image/ms_3.webp" alt="">
                        <span>界面</span>
                    </li>
                    <li>
                        <img src="./image/ms_4.webp" alt="">
                        <span>缘点</span>
                    </li>
                </ul>
            </div>     
        </div>
        <!-- 新品首发和苏宁拼购 -->
        <div class="lowAndSeckill newProducts">
            <div class="seckill">
                <div class="title">
                    <h5>新品首发</h5><p class="time">
                    <p class="describe">OPPO限定抢先购</p>
                </div>
                <ul>
                    <li>
                        <img src="./image/ms_5.webp" alt="">
                        <span>大牌上新</span>
                    </li>
                    <li>
                        <img src="./image/ms_6.webp" alt="">
                        <span>免费试用</span>
                    </li>
                </ul>
            </div> 
            <!-- 苏宁秒杀 -->
            <div class="seckill">
                <div class="title">
                    <h5>苏宁拼购</h5><p class="time">
                    <p class="describe">2人拼更实惠 全场包邮</p>
                </div>
                <ul>
                    <li>
                        <img src="./image/ms_7.webp" alt="">
                        <span>2人拼248</span>
                    </li>
                    <li>
                        <img src="./image/ms_8.webp" alt="">
                        <span>2人拼89</span>
                    </li>
                </ul>
            </div>     
        </div>

        <!-- 说明 -->
        <p style="text-align: center; font-size: 0.5rem; margin-top: 0.5rem;">不想写了，下面的布局都差不多</br>告辞！</p>
        <p style="padding-bottom: 2rem;text-align: center; font-size: 0.3rem; margin-top: 0.5rem; color:#666">|©2021 朱总 | DATE:20210104 |</p>

        <!-- 底部功能区域 -->
        <div class="fun">
            <ul>
                <li><img src="./image/fun_sy.png" alt=""><span>首页</span></li>
                <li><img src="./image/fun_fl.png" alt=""><span>分类</span></li>
                <li><img src="./image/fun_phb.png" alt=""><span>排行榜</span></li>
                <li><img src="./image/fun_gwc.png" alt=""><span>购物车</span></li>
                <li><img src="./image/fun_wdyg.png" alt=""><span>我的易购</span></li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>
    // 根据视口大小调整，html字体大小
    var w = null;
    var html = document.querySelector('html');
    w = window.innerWidth;
    html.style.fontSize = (w / 10) + 'px';
    
    window.onresize = function(){
        w = window.innerWidth;
        console.log(w);
        html.style.fontSize = (w / 10) + 'px';
    }
</script>
<!-- 网页的尺寸把滚动条的宽度也计算在内了！ -->